<template>
  <div class="chart-wrapper">
    <!-- 父子组件传值 -->
    <Title :title="title"></Title>
    <!-- 图表容器 -->
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<script>
// 2.引入柱状图构造函数 
import { Bar } from '@antv/g2plot';
import { get } from '@/utils/request'
import Title from './Title'

export default {
  components: {
    Title
  },
  data() {
    return {
      title: '设备状态分布',
      empData: [] // 数据结构示例：[{ type: '在线', value: 10 }, { type: '离线', value: 5 }]
    }
  },
  methods: {
    // 加载柱状图
    renderChart() {
      const chart = new Bar(this.$refs.chartContainer, {
        data: this.empData,
        xField: 'value',
        yField: 'type',
        seriesField: 'type',
        color: ({ type }) => {
          return type === '在线' 
            ? '#a8e6cf' // 柔和的薄荷绿
            : '#ffb7b2' // 柔和的粉色
        },
        label: {
          position: 'right', // 将标签位置改到右侧
          style: {
            fill: '#666666',
            fontSize: 14,
            fontWeight: 500
          },
          formatter: (datum) => `${datum.value} 台`
        },
        legend: {
          position: 'top',
          itemName: {
            style: {
              fill: '#666666',
              fontSize: 12
            }
          },
          marker: {
            symbol: 'square',
            style: {
              r: 4,
              lineWidth: 0
            }
          }
        },
        xAxis: {
          grid: {
            line: {
              style: {
                stroke: '#f0f0f0',
                lineWidth: 1,
                lineDash: [4, 4]
              }
            }
          },
          label: {
            autoHide: true,
            autoRotate: false,
            style: {
              fill: '#999999',
              fontSize: 12
            }
          }
        },
        yAxis: {
          label: {
            autoHide: false,
            autoRotate: false,
            style: {
              fill: '#666666',
              fontSize: 12
            }
          },
          line: {
            style: {
              stroke: '#f0f0f0',
              lineWidth: 1
            }
          }
        },
        minBarWidth: 20,
        maxBarWidth: 30,
        padding: [10, 50, 15, 50], // 减小上下内边距，使图表更紧凑
        appendPadding: [0, 0, 5, 0], // 减小底部额外空间
        marginRatio: 0.15, // 减小条形图之间的间距
        animation: {
          appear: {
            animation: 'fade-in',
            duration: 800
          },
          update: {
            duration: 400
          }
        },
        interactions: [
          { type: 'element-active' }
        ],
        barStyle: {
          radius: [4, 4, 4, 4], // 四个角都加圆角
          fillOpacity: 0.85 // 略微透明
        },
        theme: {
          backgroundStyle: {
            fill: '#ffffff'
          }
        },
        state: {
          active: {
            style: {
              fillOpacity: 0.95,
              stroke: '#000',
              lineWidth: 1
            }
          }
        },
        barBackground: {
          style: {
            fill: '#f8f8f8',
            fillOpacity: 0.2
          }
        }
      })

      // 移除动画相关的事件监听
      chart.render()
    },
    // 获取数据方法（保持原逻辑）
    async getEmpData() {
      try {
        const res = await get('/dashboard/queryDeviceOnlineNumber')
        console.log('设备状态数据:', res)
        this.empData = res.data || []
        // 自动刷新图表
        this.renderChart()
      } catch (error) {
        console.error('获取设备状态数据失败:', error)
      }
    }
  },
  mounted() {
    this.getEmpData()
    // 每30秒刷新一次数据
    setInterval(() => {
      this.getEmpData()
    }, 30000)
  }
}
</script>

<style lang="scss" scoped>
.chart-wrapper {
  height: 100%;
  width: 100%;
  padding: 12px; // 减小外边距
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.chart-container {
  flex: 1;
  min-height: 220px; // 稍微减小最小高度
  border-radius: 8px;
  overflow: hidden;
}
</style>